<template>
    <!-- 搜索  添加 -->
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
       <el-form-item label="私信内容">
           <el-input v-model="queryInfo.secretText" placeholder="请输入" clearable />
       </el-form-item>
       <el-form-item>
           <el-button type="primary" @click="getSecretList">搜索</el-button>
       </el-form-item>
   </el-form>


   <el-table :data="tableData" style="width: 100% ;text-align: center;">
       <el-table-column prop="secretId" label="编号"  />
       <el-table-column prop="user.userName" label="用户" />
       <el-table-column prop="secretText" label="私信内容"  show-overflow-tooltip />   
       <el-table-column prop="secretTime" label="私信时间" />
       <el-table-column prop="consultants.username" label="咨询师" />
       <el-table-column prop="replyText" label="回复时间" />
       <el-table-column prop="replyText" label="回复内容"  show-overflow-tooltip />
       <<el-table-column label="操作" width="250px ">
           <template #default="scope">
            
               <el-button size="small" @click="handleReply(scope.row)">
                   回复
               </el-button>
               <el-button size="small" type="danger" @click="handleDelete(scope.row.secretId)">
                   删除
               </el-button>
           </template>
           </el-table-column>
   </el-table>
   <!-- 分页 -->
   <el-pagination
       v-model:current-page="queryInfo.pageNum"
       v-model:page-size="queryInfo.pageSize"
       :page-sizes="[1, 5, 10, 20]"
       :size="size"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"/>

       <!-- 回复 -->
       <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle"  width="500" @close="close">
           <el-form :model="secret" status-icon >
               
               <el-form-item label="用户" :label-width="formLabelWidth">
                   <el-input v-model="secret.user.userName" autocomplete="off"  disabled/>
               </el-form-item>

               <el-form-item label="私信时间" :label-width="formLabelWidth">
                   <el-input v-model="secret.secretTime" autocomplete="off" disabled/>
               </el-form-item>

               <el-form-item label="私信内容"  :label-width="formLabelWidth"  >
                   <el-input
                       disabled
                       v-model="secret.secretText"
                       style="width: 300px"
                       :rows="6"
                       type="textarea"
                       placeholder="请输入内容"
                   />
               </el-form-item>
               <el-form-item label="咨询师" :label-width="formLabelWidth">
                   <el-input v-model="secret.consultants.username" autocomplete="off"  />
               </el-form-item>

               <el-form-item label="回复时间" :label-width="formLabelWidth">
                   <el-input v-model="secret.replyTime" autocomplete="off" />
               </el-form-item>

               <el-form-item label="回复内容"  :label-width="formLabelWidth">
                   <el-input
                       
                       v-model="secret.replyText"
                       style="width: 300px"
                       :rows="6"
                       type="textarea"
                       placeholder="请输入内容"
                   />
               </el-form-item>
              
           </el-form>
                       <template #footer>
                       <div class="dialog-footer">
                           <el-button @click="close">取消</el-button>
                           <el-button type="primary" @click="saveOrUpdate">
                           确定
                           </el-button>
                       </div>
                       </template>
       </el-dialog>

</template>

<script setup>
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue';
import { onMounted } from 'vue'; 
const saveOrUpdateVisible = ref(false)
const saveOrUpdateTitle = ref('')

const tableData = ref([])
const total = ref(0)
const secret = ref({
    userId: '',
    secretText: '',
    secretTime: '',
    replyText: '',
    replyTime: ''
})
const queryInfo = ref({
   pageNum: 1,
   pageSize: 5,
   secretText:''
})




// 回复
const handleReply = (row) => {
   secret.value = row
   saveOrUpdateTitle.value = '回复私信'
   saveOrUpdateVisible.value = true
}
// 取消
const close = () => {
    saveOrUpdateVisible.value = false;
}
// 确定
const saveOrUpdate = () => {
    axios.put('/secret/edit',secret.value)
    .then(resp=>{
        let result = resp.data;
        if(result.code==1){
            getSecretList();
            ElMessage({
                message: '回复成功！',
                type: 'success',
            })
        }else{
            ElMessage({
                message: '回复失败！',
            })
        }
    })
    close();
}

onMounted(() => {
   getSecretList();
})
const getSecretList = () => {
   axios.get('/secret/findByPage',{params:queryInfo.value})
    .then(resp => {
        let result = resp.data;
        console.log(result)
        total.value = result.data.total;
        if (result.code == 1) {
            tableData.value = result.data.list
        } else {
            console.log('获取问题列表失败')
        }
    })
}
// 删除
const handleDelete = (secretId) => {
   ElMessageBox.confirm(
       '真的要删除吗？',
       '提示',
       {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning',
       })
       .then(() => {
           axios.delete('/secret/remove', {
               params: { secretId: secretId }
           })
       .then(resp => {
           let result = resp.data;
           if (result.code == 1) {
                getSecretList();
               ElMessage({
                   message: '删除成功！',
                   type: 'success',
               })
           } else {
               ElMessage({
                   message: '删除失败！',
                   type: 'warning',
               })    
              
           }
       })

    })
  
 
}
// 分页
// 当用户改变每页显示的条目数时触发
const handleSizeChange = (pageSize) => {
 queryInfo.value.pageSize = pageSize;
 getSecretList();
}
// 当用户改变当前页码时触发
const handleCurrentChange = (pageNum) => {
 queryInfo.value.pageNum = pageNum;
 getSecretList();
}

</script>

<style scoped>
.el-table .cell{text-align: center;}
.el-table-column{text-align: center;}
</style>